<template>
    <view>
        <!--
<view class="city_header">
	<image src="../../images/back.png" bindtap="goBack"></image>
	<text>选择城市</text>
</view>
<view style="height: 51px"></view>
-->
        <!-- 城市列表 -->
        <scroll-view class="city_list" :scroll-y="true" :scroll-into-view="toView" :style="'height: ' + scrollHeight + 'px'">
            <view class="cities">
                <view class="current" id="AA">热门城市</view>
                <view class="city_type">
					<text class="city_tag" :data-name="'全国'" :data-id="-0" @tap="selectcity"  >全国</text>
                    <text class="city_tag" :data-name="item.name" :data-id="item.id" @tap="selectcity" v-for="(item, index) in hotlist" :key="index">{{ item.name }}</text>
                </view>
            </view>
            <view class="cities" v-for="(item, index) in citylist" :key="index">
                <view class="current" :id="item.firstname">{{ item.firstname }}</view>

                <view class="city_type">
                    <text class="city_tag" :data-name="itemName.name" :data-id="itemName.id" @tap="selectcity" v-for="(itemName, index1) in item.firstlist" :key="index1">
                        {{ itemName.name }}
                    </text>
                </view>
            </view>
        </scroll-view>

        <!-- 侧栏字母 -->
        <view class="aside_letter" @tap="choiceWordindex">
            <text data-wordindex="AA">#</text>
            <text data-wordindex="AA">热</text>
            <text data-wordindex="A">A</text>
            <text data-wordindex="B">B</text>
            <text data-wordindex="C">C</text>
            <text data-wordindex="D">D</text>
            <text data-wordindex="E">E</text>
            <text data-wordindex="F">F</text>
            <text data-wordindex="G">G</text>
            <text data-wordindex="H">H</text>
            <text data-wordindex="I">I</text>
            <text data-wordindex="J">J</text>
            <text data-wordindex="K">K</text>
            <text data-wordindex="L">L</text>
            <text data-wordindex="M">M</text>
            <text data-wordindex="N">N</text>
            <text data-wordindex="O">O</text>
            <text data-wordindex="P">P</text>
            <text data-wordindex="Q">Q</text>
            <text data-wordindex="R">R</text>
            <text data-wordindex="S">S</text>
            <text data-wordindex="T">T</text>
            <text data-wordindex="U">U</text>
            <text data-wordindex="V">V</text>
            <text data-wordindex="W">W</text>
            <text data-wordindex="X">X</text>
            <text data-wordindex="Y">Y</text>
            <text data-wordindex="Z">Z</text>
        </view>
    </view>
</template>

<script>
import { City } from '../../model/city-model.js';
var city = new City();
export default {
    data() {
        return {
            scrollHeight: '',
            toView: '#',
            type: 0,
            hotlist: '',
            citylist: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (e) {
        var that = this;
        that.type = e.id;
        uni.setNavigationBarTitle({
            title: '切换城市'
        });
        var params = {};
        city.GetCityList((data) => {
            var citylist = data.citylist;
            that.setData({
                hotlist: data.hotlist,
                citylist: data.citylist
            });
        }, params);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        selectcity: function (e) {
            var that = this;
            var id = e.currentTarget.dataset.id;
            var name = e.currentTarget.dataset.name;
            var cityinfo = {};
            cityinfo.name = name;
            cityinfo.id = id;
            console.log(cityinfo);
            uni.setStorageSync('cityinfo', cityinfo);
            uni.navigateBack({
                delta: 1
            });
        },

        choiceWordindex() {
            console.log('占位：函数 choiceWordindex 未声明');
        }
    }
};
</script>
<style>
.current {
    width: 92%;
    line-height: 28px;
    padding: 0 4%;
    background-color: #f5f5f5;
    font-size: 14px;
}

.city_type {
    display: flex;
    flex-wrap: wrap;
    padding: 5px 2%;
}

.city_tag {
    width: 28%;
    line-height: 30px;
    border: 1px solid #acacac;
    border-radius: 2px;
    font-size: 14px;
    text-align: center;
    margin: 4px 2%;
}

.active {
    border: 1px solid #e62129;
    color: #e62129;
}
/* 侧栏字母 */
.aside_letter {
    position: fixed;
    top: 58px;
    right: 0;
    z-index: 66;
}

.aside_letter text {
    display: block;
    width: 30px;
    font-size: 12px;
    line-height: 20px;
    color: #e62129;
    text-align: center;
}
</style>
